<template>
  <div>

       <div class="btn">
        <a-button type="primary" @click="addMenu.opendVisible" >新增菜单</a-button>

        <a-button type="primary" ghost @click="editMenu.opendVisible">编辑菜单</a-button>
        <a-button type="primary" ghost  danger @click="deleteMenu.opendVisible">删除菜单</a-button>
       </div>

        <!-- 新增菜单对话框 -->
    <a-modal v-model:visible="addMenu.visible" title="新增菜单" @ok="addMenu.handleOk">
    <p>选择父级菜单项(不选默认为1级菜单):</p>       
      <a-tree-select
    v-model:value="addMenu.parent_id"
    style="width: 100%"
      allow-clear
    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
    placeholder="Please select"
    tree-default-expand-all
     :tree-data="$store.state.treeData"
     :replace-fields="tree.replaceFields"
  > 
  </a-tree-select>
        <p>
        菜单名称:
    </p>
    <a-input v-model:value="addMenu.menu_name" placeholder="menu name" />
     <p>
        菜单跳转路径:
    </p>
    <a-input v-model:value="addMenu.menu_path" placeholder="menu path" />
    <p>
        菜单components页面路径:
    </p>
    <a-input v-model:value="addMenu.menu_components" placeholder="menuPage path" />
     <p>
        菜单路由名称:
    </p>
    <a-input v-model:value="addMenu.router_name" placeholder="menu router name" />
    
    </a-modal>


    <!-- 编辑菜单对话框 -->
    <a-modal v-model:visible="editMenu.visible" title="编辑菜单" @ok="editMenu.handleOk">
        <p>选择编辑的菜单项 :</p>       
      <a-tree-select
    v-model:value="editMenu.menu_id"
    style="width: 100%"
    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
    placeholder="Please select"
    tree-default-expand-all
    :tree-data="$store.state.treeData"
     :replace-fields="tree.replaceFields"
  > 
  </a-tree-select>
  <p>选择父级的菜单项 :</p>       
      <a-tree-select
    v-model:value="editMenu.parent_id"
    allow-clear
    style="width: 100%"
    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
    placeholder="Please select"
    tree-default-expand-all
    :tree-data="$store.state.treeData"
     :replace-fields="tree.replaceFields"
  > 
  </a-tree-select>
    <p>
        菜单名称:
    </p>
    <a-input v-model:value="editMenu.menu_name" placeholder="menu name" />
     <p>
        菜单跳转路径:
    </p>
    <a-input v-model:value="editMenu.menu_path" placeholder="menu path" />
    <p>
        菜单components页面路径:
    </p>
    <a-input v-model:value="editMenu.menu_components" placeholder="menuPage path" />
     <p>
        菜单路由名称:
    </p>
    <a-input v-model:value="editMenu.router_name" placeholder="menu router name" />
    <p>
        icon图标class(仅支持icon font):
    </p>
    <a-input v-model:value="editMenu.icon" placeholder="menu icon" />
    <p>
        是否隐藏:
    </p>
     <a-switch v-model:checked="editMenu.is_hide_path">
      <template #checkedChildren><check-outlined /></template>
      <template #unCheckedChildren><close-outlined /></template>
    </a-switch>
     <p>
        是否排序:
    </p>
     <a-switch v-model:checked="editMenu.sort">
      <template #checkedChildren><check-outlined /></template>
      <template #unCheckedChildren><close-outlined /></template>
    </a-switch>
     <p>
        是否启用:
    </p>
     <a-switch v-model:checked="editMenu.status">
      <template #checkedChildren><check-outlined /></template>
      <template #unCheckedChildren><close-outlined /></template>
    </a-switch>
    </a-modal>



     <!-- 删除菜单对话框 -->
    <a-modal v-model:visible="deleteMenu.visible" title="删除菜单" @ok="deleteMenu.handleOk">
      <a-tree-select
    v-model:value="deleteMenu.menu_id"
    style="width: 100%"
      allow-clear
    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
    placeholder="Please select"
    tree-default-expand-all
    :tree-data="$store.state.treeData"
     :replace-fields="tree.replaceFields"
  >
   
  </a-tree-select>
    </a-modal>
  </div>
</template>

<script>
import { ref, reactive, watch, getCurrentInstance, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { CheckOutlined, CloseOutlined } from '@ant-design/icons-vue';
export default {
    name:'',
    components:{
    CheckOutlined,
    CloseOutlined,
    },
    setup(){
        var {proxy} =getCurrentInstance()
        var store =useStore()
         var {proxy} = getCurrentInstance()
            var store =useStore()
           var tree=reactive({
                    replaceFields:{
                    key:'menu_id',
                    title:'menu_name',
                    value:'menu_id',
                    children:'child'
                },
            })
        
        //新增菜单
       var addMenu=reactive({
            visible:false,
            parent_id:'',
            menu_name:'',
            menu_path:'',
            menu_components:'',
            router_name:'',	
              test:()=>{
                if( !addMenu.menu_name || !addMenu.menu_path || !addMenu.menu_components || !addMenu.router_name){
                    proxy.$message.error('请将内容填写完整！')
                    return false
                }
                return true              
            },
            init:()=>{
                 addMenu.parent_id='',addMenu.menu_name='',addMenu.menu_path='',addMenu.menu_components='',addMenu.router_name=''
            },  	   
            opendVisible:()=>{
                 addMenu.init()
                addMenu.visible=true
            },
            handleOk:()=>{
                if(addMenu.test()){
                    var data={
                            menu_name:addMenu.menu_name,
                            menu_path:addMenu.menu_path,
                            menu_components:addMenu.menu_components,
                            router_name:addMenu.router_name,
                        }
                    if(addMenu.parent_id){
                        data.parent_id=addMenu.parent_id
                    }
                    proxy.$request({
                        url:'/menu/create',
                        method:'post',
                        data
                    }).then(async res=>{
                       addMenu.init()
                       await  store.dispatch('getTreeData')
                    }).finally(()=>{
                         addMenu.visible=false
                    })
                }
            }
        })
          

           //编辑菜单
        var editMenu=reactive({
            visible:false,
            menu_id:'',
            parent_id:'',
            menu_name:'',
            menu_path:'',
            router_name:'',
            status:false,
            menu_components:'',
            is_hide_path:false,
            sort:false,
            icon:'',
            searchCurrentMenu:()=>{ //每次选择时都找到该选择的菜单数据
                if(!editMenu.menu_id) return 
                var treeData= store.state.treeData
                function findout(arr){
                    arr.forEach(el => {                      
                      if(el.menu_id==editMenu.menu_id){
                       editMenu.menu_name=el.menu_name
                       editMenu.menu_path=el.menu_path
                       editMenu.parent_id=el.parent_id
                       editMenu.menu_components=el.menu_components
                       editMenu.icon=el.icon
                       editMenu.router_name=el.router_name
                       el.is_hide_path==0?editMenu.is_hide_path=false:editMenu.is_hide_path=true
                       el.sort==0?editMenu.sort=false:editMenu.sort=true
                       el.status==0?editMenu.status=false:editMenu.status=true
                      }
                      else{
                          if(el.child){
                              findout(el.child)
                          }
                      }                     
                    });
                }
                findout(treeData)
            },
            test:()=>{
                if(!editMenu.menu_id || !editMenu.menu_name || !editMenu.menu_path || !editMenu.menu_components || !editMenu.router_name){
                    proxy.$message.error('请将内容填写完整！')
                    return false
                }
                return true              
            },
            init:()=>{
                 editMenu.menu_id='',editMenu.menu_name='',editMenu.menu_path='',editMenu.menu_components='',editMenu.status=false,editMenu.router_name='',editMenu.parent_id='',editMenu.is_hide_path=false,editMenu.sort=false,editMenu.icon=''
            },  	   
            opendVisible:()=>{
                editMenu.init()
                editMenu.visible=true
            },
            handleOk:()=>{
                if(editMenu.test()){
                    proxy.$request({
                        url:'/menu/create',
                        method:'post',
                        data:{
                            id:editMenu.menu_id,
                            parent_id:editMenu.parent_id,
                            menu_name:editMenu.menu_name,
                            menu_path:editMenu.menu_path,
                            menu_components:editMenu.menu_components,
                            router_name:editMenu.router_name,
                            is_hide_path:editMenu.is_hide_path?1:0,
                            sort:editMenu.sort?1:0,
                            status:editMenu.status?1:0,
                            icon:editMenu.icon
                        }
                    }).then(async res=>{
                        editMenu.init()
                       await  store.dispatch('getTreeData')


                    }).finally(()=>{
                         editMenu.visible=false
                    })
                }
            }
        })
        watch(()=>editMenu.menu_id,editMenu.searchCurrentMenu) //监听用户选择树状菜单项的变化



        //删除菜单
        var deleteMenu=reactive({
            visible:false,
            menu_id:'',
            init:()=>{
                deleteMenu.menu_id=''
            },
            test:()=>{
                if(!deleteMenu.menu_id){
                       proxy.$message.error('请将内容填写完整！')
                       return false
                }
                return true
            },
            opendVisible:()=>{
                deleteMenu.init()
                deleteMenu.visible=true
            },
            handleOk:()=>{
                if(!deleteMenu.test()) return
                proxy.$request({
                    url:'/menu/del',
                    method:'post',
                    data:{
                        id:deleteMenu.menu_id
                    }
                }).then(async(res)=>{
                        deleteMenu.init()
                       await  store.dispatch('getTreeData')
                }).finally(()=>{
                    deleteMenu.visible=false
                })
                
            }
        })



        return {
            addMenu,
            editMenu,
            deleteMenu,
            tree
        }
    }
}
</script>

<style lang="scss" scoped>
.btn{
    display: flex;
   
}
</style>